<template>
    <div class="home">
        <img class="slogan"
             src="../assets/p1/slogan.png">
        <img class="tip"
             src="../assets/p1/tip.png">
        <img class="go"
             src="../assets/p1/go.png"
             @click="start">
    </div>
</template>

<script>
export default {
    name: "home",
    methods: {
        start() {
            this.$router.replace("/game");
        }
    }
};
</script>
<style lang="scss" scoped>
.home {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url("../assets/p1/bg.jpg") no-repeat;
    background-size: 100%;
    .slogan {
        width: 5.75rem;
        position: absolute;
        left: 0;
        right: 0;
        top: 1.05rem;
        margin: auto;
    }
    .tip {
        position: absolute;
        left: 4.33rem;
        top: 1.56rem;
        width: 1.6rem;
    }
    .go {
        position: absolute;
        top: 7.27rem;
        left: 0;
        right: 0;
        margin: auto;
        width: 1.47rem;
    }
}
</style>
